<template>
  <div class="box">
    <div class="image-container">
      <!-- <img v-if="isShow" src="@/assets/login/daBJ.png" alt="底部背景图" class="overlay-beiJ"> -->
      <div class="beiJ" v-show="isZhdl">
        <video autoplay loop muted>
          <source src="@/assets/videos/zhdl.mp4" type="video/mp4">
        </video>
      </div>
      <!-- <img src="@/assets/login/titleBJ.png" alt="顶部图片" class="overlay-image"> -->
      <!-- <img src="@/assets/login/biaoti.png" alt="顶部标题" class="overlay-imageBT"> -->
      <div v-if="showFirstImage">
        <div class="yuanquan" @click="loginDL"></div>
        <img src="@/assets/login/KPIBtn.png" alt="KPI按钮" class="overlay-imageKPI" @click="kpiLogin" style="z-index: 99;"
          v-if='isImageVisible'>
      </div>
      <div v-else>
        <div class="yuanquan" @click="loginDL"></div>
        <img src="@/assets/login/dengluBJ.png" alt="密码登录" class="overlay-imageZh">
        <div class="loginCompontes" style="z-index: 99;">
          <login></login>
        </div>
      </div>
      <div>
        <!-- <img src="@/assets/login/dibuBj.png" alt="底部" class="overlay-imageDibuBj"> -->
      </div>
    </div>
    <div class="footerFont">
      <div>滨州市公安局治安支队</div>
      <div class="footerFont-chanan">技术支持：辰安科技</div>
      <div class="footerFont-xiazai">
        <div class="icon-xiazai"></div>
        <div>插件下载</div>
      </div>
    </div>

    <div class="beiJ" v-show="iskpidl">
      <video autoplay muted @ended="handleVideoEnded()">
        <source src="@/assets/videos/kpidl.mp4" type="video/mp4">
      </video>
    </div>
  </div>
</template>

<script>
import login from '@/pages/user/Login.vue'
export default {
  name: 'LoginHome',
  components: {
    login
  },
  data() {
    return {
      isZhdl: true,  // 主背景页面
      showFirstImage: true, // 点击切换KPI和账号密码登录
      iskpidl: false,   // KPI登录MP4
      isImageVisible: true,// 点击KPI登录隐藏KPI按钮 
      isVideoEnded: false
    };
  },
  computed: {
    windowHeight() {
      return window.innerHeight
    },
    windowWidth() {
      return window.innerWidth
    }
  },
  mounted() {
  },
  computed: {
    shouldShowVideo() {
      return !this.isVideoEnded;
    }
  },
  methods: {
    handleVideoEnded() {
      // 视频播放完成后的操作
      // 调用页面的特定方法或跳转到其他页面 
      this.isVideoEnded = true;
      this.$router.push('/appSelect');
    },
    kpiLogin() {
      console.log(111);
      this.isImageVisible = false // 隐藏KPI按钮 
      this.isZhdl = false   // 隐藏主背景页面
      this.iskpidl = true; // 显示KPI登录MP4
    },
    loginDL() {
      this.showFirstImage = !this.showFirstImage;
      // this.showFirstImage = false;
    }
  },
};
</script>

<style lang="less" scoped>
.beiJ {
  // position: absolute;
  z-index: -1;
  background: #000;

  video {
    width: 100vw;
  }
}

.box {
  position: relative;
  display: inline-block;
}

.overlay-beiJ {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.overlay-imageBT {
  position: absolute;
  top: 40px;
  left: 550px;
  width: 45%;
}

.overlay-imageKPI {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 180px;
  height: 180px;
  z-index: 20;
}

.overlay-imageZh {
  position: absolute;
  top: 48.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 540px;
}

.overlay-imageDibuBj {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  // background: lightcoral;
}

.footerFont {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  left: 0;
  width: 100%;
  color: #d4d2d2;
  z-index: 2;
  // padding: 4px 0;
  background-color: rgba(7, 15, 90, 0.2);
}

// .footerFont {
//   position: fixed;
//   bottom: 0;
//   width: 100%;
//   // background-color: #f1f1f1;
//   padding: 20px;
//   text-align: center;
// }

.footerFont-chanan {
  padding: 0 25px;
}

.footerFont-xiazai {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.loginCompontes {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  // background: lightcoral;
  width: 100%;
  height: 300px;
}

.yuanquan {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  // background: lightcoral;
  width: 40%;
  height: 70%;
  border-radius: 50%;
}
</style>